<template>
    <div class="lgbox register">
        <video class="myvideo" autoplay muted loop :src="src"></video>
        <div class="login-box">
            <h2 class="title">找回密码</h2>
            <div class="box">
                <el-form ref="formRef" :model="model" status-icon :rules="rules" label-width="80px" class="myform">
                    <el-form-item label="手机号" prop="phone">
                        <el-input :prefix-icon="Cellphone" clearable v-model="model.phone" type="text"
                            placeholder="请输入账号(用户名或手机号)" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="验证码" prop="captcha">
                        <el-row>
                            <el-col :span="13">
                                <el-input :prefix-icon="Message" clearable v-model="model.captcha" type="text"
                                    placeholder="请输入验证码" autocomplete="off" />
                            </el-col>
                            <el-col :span="10" :offset="1">
                                <CaptchaBtn :phone="model.phone"></CaptchaBtn>
                            </el-col>
                        </el-row>
                    </el-form-item>

                    <el-form-item label="新密码" prop="password">
                        <el-input :prefix-icon="Lock" clearable v-model="model.password" type="password" show-password
                            placeholder="请输入新密码" autocomplete="off" />
                    </el-form-item>

                    <el-form-item class="lastitem">
                        <div class="alinks">
                            <router-link class="litem " to="/reg">立即注册</router-link>
                            <router-link class="litem bg" to="/login">登录</router-link>
                        </div>
                    </el-form-item>

                    <el-form-item class="lastitem">
                        <el-button type="success" block class="btnblock" @click="submitForm(formRef)">确认找回密码</el-button>
                        <el-button type="danger" block class="btnblock" @click="resetForm(formRef)">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>


<script setup lang="ts">
import { ref, reactive, onMounted, computed, onUnmounted } from 'vue'
import { Calendar, Search, Lock, User, Cellphone, Message } from '@element-plus/icons-vue'
import { formRefType, userInfoFace } from '../../utils/types';
import type { FormRules } from 'element-plus'
import { useRoute, useRouter } from 'vue-router';
import { reg } from '../../utils/validate';
import { useFormHook } from '../../hooks/useFormHook'
import { Http } from '../../api/api'
import { ShowError } from '../../utils/message'

const src = ref('https://img-baofun.zhhainiao.com/market/133/b99b51e6c7945c9d5565861d397451cb_preview.mp4')
// const src = ref('https://mclaren.scene7.com/is/content/mclaren/McLaren%20720s%20Super%20Series-0x720-3000k')

const router = useRouter()
const model = reactive<userInfoFace>({})
const { resetForm } = useFormHook()
const formRef = ref<formRefType>()
const rules = reactive<FormRules>({
    phone: [
        { required: true, message: '手机号不能为空', trigger: 'blur' },  //   trigger 触发条件
        {
            pattern: reg.phone,  // input pattern 定义正则 
            message: '手机号格式不正确'
        }
    ],
    captcha: [
        { required: true, message: '验证码不能为空', trigger: 'blur' },
        {
            pattern: reg.code,
            message: '请输入4位数字验证码'
        }
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        {
            pattern: reg.pwd,
            message: '请输入6-16位数字加字母的密码'
        }
    ],
})

const submitForm = async (formEl: formRefType) => {
    if (!formEl) return;
    let res = await Http.chechphone({ phone: model.phone }) as unknown as any;
    if (res.code == 200) {
        Http.captchaVerify({
            phone: model.phone,
            captcha: model.captcha
        })
            .then(async (result: any) => {
                if (result.data) {
                    // 验证码正确才能去修改密码 
                    let data = await Http.changepass({
                        phone: model.phone,
                        password: model.password,
                    }) as unknown as any;
                    if (data.code == 200) {
                        router.push("/login")
                    }
                }
            })
            .catch(err => {
                ShowError('验证码有误')
            })
    }
}
</script>
